<template>
    <el-card>
        课程管理
    </el-card>
    <el-card class="detail">
        <div class="demo">
            <el-select v-model="queryParams.kindName" clearable>
                <el-option v-for="item in coureseObj" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-input placeholder="请输入课程名称" v-model="queryParams.couresName" style="width: 250px;" />
        </div>
        <el-table :data="courseList" style="width: 100%" v-loading="loading">
            <el-table-column fixed="left" prop="courseName" label="课程名称" width="150" />
            <el-table-column prop="originAlPrice" label="售价" width="150" />
            <el-table-column prop="sellingPrice" label="底价" width="150" />
            <el-table-column prop="kindName" label="项目" width="150" />
            <el-table-column prop="isSale" label="是否售卖" width="150">
                <template #default="{ row }">
                    <el-switch v-model="row.isSale" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"  active-text="上架" disabled/>
                </template>
            </el-table-column>
            <el-table-column prop="updatePeople" label="更新人" width="150" />
            <el-table-column prop="updateTime" label="更新时间" width="200">
                <template #default="{ row }"> 
                    {{ formatTime(row.updateTime) }}
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="150">
                <template #default="{row}">
                    <el-button size="small" @click="openEditCourse(row)">编辑课程</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
    <!-- <echa></echa> -->

    <EditCourse ref="editCourseRef" :courese="courseList" @change="getCourseListFn"></EditCourse>
</template>

<script setup>
import echa from './components/echa.vue' //  可视化图表
import echr2 from './components/echr2.vue'
import { getCourseObj } from '@/apis/student' // 获取课程类目
import { getCourse } from '@/apis/course' // 关于课程的api
import { ref, onMounted, watch } from 'vue'
import { formatTime } from '@/utils/formmatTime' // 时间格式化方法
import EditCourse from './components/EditCourse.vue' // 抽屉
const coureseObj = ref({})
const courseList = ref([]) // 课程信息
const loading = ref(false) // 控制效果是否触发
const editCourseRef = ref(null)

const queryParams = ref({  // 请求数据
    kindName: '', // 分类 
    couresName: '', // 课程名称
    currentPage: 1, // 返回第几页的数据,默认第一页
    pageSize: 10 // 每次返回多少条,默认每次返回10条
})

// 如果请求参数发生变化就发起请求请求新的数据
watch(queryParams.value, () => {
    getCourseListFn()
})

// 获取课程信息
const getCourseListFn = async () => {
    // 加载动画
    loading.value = true;
    const { data } = await getCourse(queryParams.value)
    loading.value = false;
    courseList.value = data.data
}

// 当页面第一次加载时就要请求到数据
onMounted(async () => {
    const { data } = await getCourseObj()
    coureseObj.value = data.kindName.map((item) => { return { value: item.value, label: item.value } })
    console.log( coureseObj.value);
    getCourseListFn()
})

// 打开编辑课程抽屉
const openEditCourse = (row)=>{
    editCourseRef.value.open(row)
}




</script>

<style lang="scss" scoped>
.detail {
    margin-top: 10px;

}

.demo {
    display: flex;
}

</style>